<template>
  <div class="demo-list">
    <CommonList :table-data="tableData" dialogSize="特大" :showImportBtn="isTableStyle" :enable-export="isTableStyle"
      maxViewTextLength="20" :showIndex="true" :addNewObj="newDemo" :searchFromServer="false" :enableColumnBtn="true"
      :filterFromServer="true" :total-count="totalCount" :column-list="pColumns" :listStyle='listStyle'
      :filterObjList="filterDataList" :filterListData="typeNames" v-bind="objectOfAttrs" :isMobile="isMobile"
      @before-save="beforeSave">
      <template #otherbtns>
        <el-radio-group v-model="listStyle">
          <el-radio-button label="pic">pic</el-radio-button>
          <el-radio-button label="free">free</el-radio-button>
          <el-radio-button label="table">table</el-radio-button>
        </el-radio-group>
      </template>
      <template #headTitle>
        <div style="text-align: left;">
          <h3>标题</h3>
        </div>
      </template>

      <template #freeitem="{ row }">
        <div
          style="display: flex;padding: 5px; font-size: 16px;font-weight: bold;line-height: 200%;border-bottom: solid 1px;">
          <el-icon :class="row.isPublic ? 'greenColor' : 'redColor'"
            style="vertical-align: bottom;margin-top: 5px;margin-right: 5px;">
            <WindPower />
          </el-icon>
          <div style="justify-content: flex-start;  width: 85%;;">{{ row.title + '【' + row.demoType + '】' }}</div>
          <div style="justify-content: flex-end; align-items:center;text-align: right; width: 15%;">{{ formatDate(
            row.createdTime) }}</div>
        </div>


      </template>
      <template #mMenuItems>
        <van-dropdown-item title="选择" ref="itemRef">
          <van-cell center title="包邮">
            <template #right-icon>
              <van-switch v-model="s1" />
            </template>
          </van-cell>
          <van-cell center title="团购">
            <template #right-icon>
              <van-switch v-model="s2" />
            </template>
          </van-cell>
          <div style="padding: 5px 16px;">
            <van-button type="primary" block round>
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </template>

      <template #mCellTitle="{ row }">
        <van-icon name="user-o" />
        <span style="margin-left: 10px;"> {{ row.title + '【' + row.demoType + '】' }}</span>
      </template>

      <template #mCellOthers="{ row }">
        <van-cell :title="row.createdTime" />
        <van-cell title="hello" />
      </template>
    </CommonList>
  </div>
</template>

<script setup lang="ts">

// import CommonList from "../../packages/components/commonlist.vue";
// import { getListData } from "/@/request/getlistdata"; //获取题目列表和删除题目！
import { InitComponentData, DataColumn, FilterData, SaveType } from '../../packages/index'
import { DemoColumns, netUtil } from '/@/models/columndata';
import { formatDate } from '../utils/tool'
import { Demo } from "/@/models/index";
import { DemoUrlSet, DemoUrlRestfulSet } from "/@/models/urlset";
import { computed, ref, onMounted, provide } from 'vue'
import axios from '/@/request/http';
import { WindPower } from '@element-plus/icons-vue';

const s1=ref(false)
const s2 = ref(false)
const listStyle = ref('free')
const isTableStyle = computed(() => {

  return listStyle.value == 'table'
})

const isMobile = computed(() => {
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  return Boolean(flag)
})


const beforeSave = (row, saveType) => {
  if (saveType == SaveType.Delete) { //有成员，不可以删除！！

    row.errorMessage = '测试不允许删除！！'
  }
  // row.memberIDlist = row.memberIDs.join(',')
}
const objectOfAttrs = {
  isDemo: true,
  // noOpColumn: true,
  paging: true,
  // containDialog:false,
  hasListHead: true,
  sampleFileUrl: "http://demo.codelover.club/images/demo.xlsx",
  datatitle: DemoUrlSet.title,
  keyFieldName: "demoID",
  filterFieldName: "demoType",
  pageSizes: [10, 15, 20, 50, 100]
  // hasResizeBtn: true,
  // useSelect: true,

}

const { tableData, totalCount } = InitComponentData<Demo>(netUtil, DemoUrlRestfulSet, 'demoID', { currNo: 1 });
// const tableData = ref([])
// const totalCount = ref(1)
const newDemo = new Demo()
const typeNames = ref(['公告', '新闻', '头条', '资讯'])
const filterDataList = ref<FilterData[]>([])

const pColumns = computed(() => {
  const newColumns = DemoColumns.value.map((item: DataColumn) => {
    if (item.fieldName == 'demoType') {

      item.options = typeNames.value.map(typeName => { return { title: typeName, value: typeName } })
    }
    return item
  })

  return newColumns
})

onMounted(() => {

  const fdata: FilterData = { datalist: typeNames.value, isMultiple: false, onlyLocal: true, placeholder: '类型', filterFieldName: 'demoType' }
  const stateData: FilterData = { datalist: [{ isPublic: true, title: '公开' }, { isPublic: false, title: '不公开' }], isMultiple: true, onlyLocal: true, placeholder: '级别', filterFieldName: 'isPublic', valueFieldName: 'isPublic', textFieldName: 'title', selectedlist: [] }

  filterDataList.value.push(stateData)
  filterDataList.value.push(fdata)
  //tableData.value=[{ title: 'hello', itemDesc: 'sdfasdf' }]
})
// RoleCheck()
</script>

<style scoped>
.redColor {
  color: red;
}

.greenColor {
  color: green;
}
</style>